<template>
  <div class="not-found-container">
    <div class="error-content">
      <div class="error-icon">
        <el-icon :size="100" color="#F56C6C">
          <WarningFilled />
        </el-icon>
      </div>
      <h1 class="error-title">404</h1>
      <p class="error-message">哎呀，页面走丢了~</p>
      <p class="error-submessage">您访问的页面不存在或已被移除</p>

      <el-button
          type="primary"
          class="home-button"
          @click="goToHomePage"
          round
      >
        <el-icon><HomeFilled /></el-icon>
        <span>返回首页</span>
      </el-button>
    </div>

    <div class="error-footer">
      <p>点击按钮返回主页面</p>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goToHomePage = () => {
  const user = JSON.parse(localStorage.getItem('xm-pro-user'))
  if (!user) {
    router.push('/login')
    return
  }

  switch(user.role) {
    case 'ADM': router.push('/admin/admin-manage'); break
    case 'PRE': router.push('/president/home'); break
    case 'STU': router.push('/student/home'); break
    default: router.push('/login')
  }
}
</script>

<style scoped>
.not-found-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  text-align: center;
}

.error-content {
  max-width: 600px;
  padding: 40px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.6s ease-out;
}

.error-icon {
  margin-bottom: 20px;
}

.error-title {
  font-size: 80px;
  margin: 0;
  color: #F56C6C;
  font-weight: 700;
}

.error-message {
  font-size: 24px;
  margin: 10px 0;
  color: #333;
}

.error-submessage {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.home-button {
  padding: 12px 30px;
  font-size: 16px;
  margin-top: 20px;
}

.home-button span {
  margin-left: 8px;
}

.error-footer {
  margin-top: 40px;
  color: #999;
  font-size: 14px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .error-content {
    padding: 20px;
    width: 90%;
  }

  .error-title {
    font-size: 60px;
  }

  .error-message {
    font-size: 20px;
  }
}
</style>